<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ note[1] }} - 简易笔记应用</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <!-- 引入代码高亮样式 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>简易笔记应用</h1>
        </header>
        
        <!-- 消息提示区域 -->
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="messages">
                    {% for message in messages %}
                        <div class="message">{{ message }}</div>
                    {% endfor %}
                </div>
            {% endif %}
        {% endwith %}
        
        <!-- 笔记详情区域 -->
        <div class="note-detail-section">
            <!-- 笔记标题和操作按钮 -->
            <div class="note-header">
                <h2 class="note-title">{{ note[1] }}</h2>
                <div class="note-actions">
                    <a href="{{ url_for('edit_note', note_id=note[0]) }}" class="edit-btn">编辑</a>
                    <a href="{{ url_for('delete_note_route', note_id=note[0]) }}" class="delete-btn" onclick="return confirm('确定要删除这条笔记吗？')">删除</a>
                    <a href="{{ url_for('index') }}" class="back-btn">返回列表</a>
                </div>
            </div>
            
            <!-- 笔记元信息 -->
            <div class="note-meta">
                <span class="note-date">创建于: {{ note[3] }}</span>
                {% if note[3] != note[4] %}
                    <span class="note-updated">更新于: {{ note[4] }}</span>
                {% endif %}
            </div>
            
            <!-- 笔记内容 (渲染后的Markdown) -->
            <div class="note-content markdown-content">
                {{ rendered_content|safe }}
            </div>
        </div>
    </div>
    
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 添加消息提示的自动消失效果
            const messages = document.querySelectorAll('.message');
            messages.forEach(message => {
                setTimeout(() => {
                    message.classList.add('fade-out');
                }, 3000);
            });
            
            // 为代码块添加高亮效果
            document.querySelectorAll('pre code').forEach((block) => {
                hljs.highlightBlock(block);
            });
        });
    </script>
</body>
</html>